<template>
  <!-- 注册页面的整体盒子 -->
  <div class="reg-container">
    <!-- 注册的盒子 -->
    <div class="reg-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 注册的表单区域 -->
      <!-- 在`el-form`组件和`el-form-item`组件分别添加rules属性model属性和prop属性   ref-->
      <el-form class="reg" :model="regForm" :rules="regFormRules"  ref="refForm"  status-icon>
        <el-form-item prop="username">
          <!-- 提示信息 字体图标 双向绑定 -->
          <el-input placeholder="请输入用户名"   prefix-icon="el-icon-user" v-model="regForm.username"></el-input>
        </el-form-item>
         <el-form-item prop="password">
          <el-input placeholder="请输入密码"   prefix-icon="el-icon-lock"  v-model="regForm.password"></el-input>
        </el-form-item>
         <el-form-item prop="repassword">
          <el-input placeholder="请确认密码"   prefix-icon="el-icon-unlock"  v-model="regForm.repassword"></el-input>
        </el-form-item>
        <el-button style=" width: 100%;" type="primary" @click="submitForm">注册</el-button>
        <el-link >去登录</el-link>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Reg',
  
  data(){
    // 自定义校验规则函数,校验密码是否相同
    // callback()
    //   如果失败,callback(new Error('错误的描述))
    //   如果成功,callback() 放行,如果没有使用callback 那么程序就卡在当前位置,校验无法获取结果
      const samePwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.regForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      // 存储表单数据的对象
      regForm:{
        username:"",
        password:"",
        repassword:""
      },
      // 存储表单验证规则对象
       regFormRules:{
        username:[  { required: true, message: '请输入用户名', trigger: 'blur' },
        // 字母数字,长度1~10
        {pattern:/^[0-9a-zA-Z]{1,10}$/,message:'请输入长度为1~10位的字母数字',trigger:'blur'}
        ],
        password:[  { required: true, message: '请输入密码', trigger: 'blur' },
               {pattern:/^\S{6,15}$/,message:'请输入长度为6~15的非空字符串',trigger:'blur'},
        ],
        repassword:[ 
          {pattern:/^\S{6,15}$/,message:'请输入长度为6~15的非空字符串',trigger:'blur'},
        // 自定义校验
       { validator: samePwd, trigger: 'blur' }  //validator 调用自定义校验规则函数
        ]
      }
    }
  },
  methods:{
    // 
    submitForm(){
      // 兜底校验
      // this.$refs.refForm 获取form组件,使用form组件调用validate函数
   this.$refs.refForm.validate( async (valid) => {
          //所有的校验通过返回true
          // 只要一项不通过返回false
          if (!valid) return console.log('验证不通过');
          // 通过
          console.log('验证通过');
          // 1.1发送请求,实现注册
          const {data:res} = await this.$http.post('/api/reg',this.regForm)
          console.log(res);
          // 1.2判断业务状态码  注册失败 (判断失败写在拦截器里面)
          // if(res.code !== 0) return alert(res.message)
          // 注册成功
          if(res.code == 0) {
            // 成功提示
           this.$message.success(res.message)
          // 1.3跳转到登录页
          this.$router.push('/login')
          }
          //    保存token
         localStorage.setItem('token',res.token)

        });
    }
  }
}
</script>

<style lang="less" scoped>
.reg-container {
  background: url('../../assets/images/login_bg.jpg') center;
  background-size: cover;
  height: 100%;

  .reg-box {
    width: 400px;
    height: 335px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

// 内边距
.reg {
  padding: 0 25px;
}

    .title-box {
      height: 60px;
      background: url('../../assets/images/login_title.png') center no-repeat;
    }
  }
}
</style>
